<template>
  <div className="container">
    <div className="card-container">
      <div className="card-left">
        <span>
          <h1>欢迎登录</h1>
          <p>月木后台管理系统</p>
        </span>
      </div>
      <div className="card-right">
        <form>
          <label htmlFor="username">用户名</label>
          <input type="text" id="username" v-model="adminForm.adminName">
          <label htmlFor="password">密码</label>
          <input type="password" id="password" v-model="adminForm.adminPassword">
          <button @click="handleLogin">立即登录</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import {reactive} from 'vue';
import {useRouter} from "vue-router"
import sysAxios from "@/api/sys.js"
import {useDataStore} from "@/stores/dataStore.js"

const dataStore = useDataStore()
const router = useRouter()

//用户表单
const adminForm = reactive({
  adminName: '',
  adminPassword: '',
})
/**
 * 登录
 */
const handleLogin = () => {
  if (adminForm.adminName.length >= 1 || adminForm.adminPassword.length >= 1) {
    sysAxios.sys_login({
      username: adminForm.adminName,
      password: adminForm.adminPassword
    }).then(res => {
      if (res.data.code === 200) {
        dataStore.adminName = res.data.data.username;
        sysAxios.admin_findByAdminName({
          adminName: res.data.data.username
        }).then(res => {
          dataStore.adminId = res.data.data.adminId
          dataStore.adminImg = res.data.data.adminImg
        })
        dataStore.islogin = true
        router.push("/sys/admin")
      } else {
        ElMessage.error(res.data.message)
      }
    })
  } else {
    ElMessage.error('账号密码不能为空')
  }
}
</script>
<style scoped lang="scss">
.container {
  padding-top: 5%;
  width: 100%;
  height: 900px;
  background-image: url("@/assets/img/bg2.jpg");
  background-size: cover;
}

.card-container {
  filter: blur(0.1px);
  position: fixed;
  display: flex;
  margin-left: 5%;
  width: 90%;
  height: 70%;

  .card-left {
    width: 50%;
    background-color: #7567dd;
    border-radius: 10px 0 0 10px;

    span {
      cursor: pointer;
      display: block;
      color: #ffffff;
      margin-top: 30%;
      margin-left: 7%;

      h1 {
        text-align: left;
        font-size: 4em;
        font-weight: 900;
        transition: all .4s linear;
      }

      p {
        font-size: 1.5em;
        margin-top: 2%;
        transition: all .4s linear;
      }

    }
  }

  .card-right {
    width: 50%;
    background-color: #ffffff;
    border-radius: 0 10px 10px 0;

    form {
      margin-top: 23%;
      margin-left: 7%;
      width: 75%;

      input {
        display: flex;
        margin-bottom: 10%;
        outline: none;
        border-color: #7265dc !important;
        width: 100%;
        border: none;
        border-bottom: 1px solid #444951;
        padding: 10px 0;
        background: none;
        color: #8a8d93;
        transition: all .4s linear;
      }

      input:hover {
        border-color: #5a48ea !important;
        cursor: pointer;
      }

      button {
        font-weight: bolder;
        font-size: 16px;
        border-radius: 5px;
        border: none;
        padding-top: 3%;
        padding-bottom: 3%;
        width: 100%;
        transition: all .4s linear;
        background-color: #796aee;
        color: #ffffff;
      }

      button:hover {
        cursor: pointer;
        background-color: #5a48ea;
      }
    }
  }
}

</style>
